<template>
  <div id="app">
    <div class="title">当页支付 - 测试页面</div>
    <div class="btn" @click="handleOpen(1)">直播 - 微信浏览器环境打开</div>
    <div class="btn" @click="handleOpen(0)">直播 - 其他环境打开</div>

    <div>
      <button
        style="margin-top: 6px; display: block"
        v-for="item of goodsList"
        :key="item.id"
        @click="toBuy(item)"
      >
        {{ `${item.resource_type_name}:${item.title}` }}
      </button>
    </div>

    <CLivePay
      :open.sync="isShowPay"
      ref="currentPay"
      :aliveInfo="aliveInfo"
      :isLiveH5="isLiveH5"
      :useScatter="true"
      :isGrayMarketing="isGrayMarketing"
      @failCallback="failCallback"
      @payComplete="payComplete"
      @toH5Details="toIframe"
      @hook:mounted="onCurrentPayMounted"
    ></CLivePay>
    <!-- <Skeleton :skeletonType="skeletonType"></Skeleton> -->
    <!-- <GroupStep v-if="1" :market-info="marketInfo"></GroupStep> -->
  </div>
</template>

<script>
import CLivePay from "../../src/c-live-pay/index.js";
import Skeleton from "../../src/c-live-pay/components/Skeleton";
import GroupStep from "../../src/c-live-pay/components/GroupStep";
import { fetchInfo } from "./live-info";

export default {
  components: { CLivePay, Skeleton, GroupStep },
  data() {
    return {
      goodsList: [],
      marketInfo: {
        team_type: 2,
      },
      skeletonType: "order",
      isShowPay: false,
      // aliveInfo: null,
      aliveInfo: {
        alive_id: "l_670c7fb8e4b0694c94ea3f7b",
        alive_img_url:
          "https://commonresource-1252524126.cdn.xiaoeknow.com/image/lr4dye8f02d5.jpg?imageView2/w/1050/q/100/rq/100|imageMogr2/ignore-error/1",
        alive_room_url:
          "https://appilvzothq7546.h5.xiaoeknow.com/v2/course/alive/l_6612153ee4b092c14f8413ce?app_id=appilvzothq7546&pro_id=&type=2",
        alive_state: 3,
        alive_type: 2,
        app_id: "appjmazichv3009",
        can_select: 1,
        checktimestamp: 1712483844,
        comment_count: 0,
        cover_img_url:
          "https://commonresource-1252524126.cdn.xiaoeknow.com/image/l6nfw9120t1u.png",
        create_mode: 0,
        descrb: "",
        img_url:
          "https://commonresource-1252524126.cdn.xiaoeknow.com/image/l6nfw9120t1u.png",
        img_url_compressed:
          "https://commonresource-1252524126.cdn.xiaoeknow.com/image/l6nfw9120t1u.png",
        manual_stop_at: null,
        old_live_room_url:
          "/content_page/eyJ0eXBlIjoxMiwicmVzb3VyY2VfdHlwZSI6NCwicmVzb3VyY2VfaWQiOiJsXzY2MTIxNTNlZTRiMDkyYzE0Zjg0MTNjZSIsInByb2R1Y3RfaWQiOiIiLCJwYXltZW50X3R5cGUiOjEsImNoYW5uZWxfaWQiOiIiLCJhcHBfaWQiOiJhcHBpbHZ6b3RocTc1NDYiLCJzb3VyY2UiOiIiLCJzY2VuZSI6IiIsImNvbnRlbnRfYXBwX2lkIjoiIiwiZXh0cmFfZGF0YSI6MCwid2ViX2FsaXZlIjowLCJ0b2tlbiI6IiJ9",
        org_content: "",
        param_str:
          "eyJwYXltZW50X3R5cGUiOjIsInByb2R1Y3RfaWQiOiIiLCJyZXNvdXJjZV9pZCI6ImxfNjYxMjE1M2VlNGIwOTJjMTRmODQxM2NlIiwicmVzb3VyY2VfdHlwZSI6NH0",
        product_id: "",
        product_name: "",
        push_ahead: "5",
        push_state: 2,
        push_url: "",
        pushzb_start_at: "2024-04-07 12:00:00",
        pushzb_stop_at: "2024-04-07 13:00:00",
        record_push_end_time: "2024-04-07 11:59:00",
        remainder_time: 0,
        resource_type: 4,
        room_id: "XET#265f0747b001e0e59",
        sell_mode: 0,
        summary: "测试",
        title: "aiden测试埋点 - 勿动",
        user_title: "",
        user_type: 0,
        view_count: 4,
        zb_countdown_time: -21504,
        zb_start_at: 1712462400,
        zb_stop_at: 1712466000,
        user_id: "u_670c7fd316b59_3ItOy3nzQD",
        playbacknow: false,
      },
      isLiveH5: true,
      isGrayMarketing: true,
      params: {
        "goodsItem": {
          "activity_price": 0,
          "activity_type": 0,
          "content_app_id": "",
          "count": 1011,
          "coupon_id": [
            "cou_66cc5463a31c2-rS4KwL"
          ],
          "course_offline_type": 2,
          "cr_id": "1",
          "distribution_pattern": -1,
          "end_at": "",
          "err_code": 0,
          "goods_brief_text": "",
          "goods_desc": "",
          "goods_type": 21,
          "hide_sub_count": 0,
          "id": "g_654b3471385ed_ryJqun0a13",
          "img_url": "https://wechatapppro-1252524126.file.myqcloud.com/appjmazichv3009/image/b_u_61de508b11c28_uYlL7gjD/xw6q6dloe1hmgm.png",
          "is_activity": 0,
          "is_display_package": 1,
          "is_sell_out": 0,
          "is_super_vip": 0,
          "is_svip": 0,
          "line_price": 0,
          "now_stock": 0,
          "order_num": 20,
          "order_weight": 2,
          "pageNum": 1,
          "preferential_price": 0,
          "price": 1250,
          "resource_id": "SPU_ENT_1699427441i93acMym9BG4P",
          "resource_rights_type": 0,
          "resource_type": 21,
          "resource_type_name": "实物商品",
          "resource_type_name_en": "Entity",
          "sec_kill_is_preheat": 0,
          "sec_kill_is_subscribe": 0,
          "sec_kill_preheat_time": "",
          "sec_kill_subscribe_time": "",
          "sec_kill_user_is_subscribe": 0,
          "show_stock": 1,
          "sku_floor_price": 50,
          "spu_id": "SPU_ENT_1699427441i93acMym9BG4P",
          "spu_type": "ENT",
          "start_at": "",
          "stock": 991,
          "svip_coupon_over": false,
          "svip_discount": 0,
          "svip_price": 0,
          "target_url": "https://appjmazichv3009.h5.xiaoeknow.com/v1/goods/goods_detail/SPU_ENT_1699427441i93acMym9BG4P?type=2",
          "teacher_auth": 1,
          "title": "yeleon测试",
          "total": 3,
          "true_type": 21,
          "resourceTypeName": "实物商品",
          "resourceTypeNameEn": "Entity",
          "leftStock": 991,
          "svipAllFree": false,
          "priceShow": 1250,
          "priceShowInt": "12",
          "priceShowFlow": "50",
          "preferentialShowInt": "0",
          "preferentialShowFlow": "00",
          "currentActive": "",
          "priceLine": 0,
          "priceLineShowInt": "0",
          "priceLineShowFlow": "00",
          "entityShowStock": 1,
          "hasStock": 1
        },
        "categoryInfo": [],
        "hasPreferentialPrice": false,
        "isFromLiveGoodsList": true,
        "toDetails": false,
        "permission": false,
        "alive_sub_id": "l_s_2c7c20c2a007de917"
      },
    };
  },
  mounted() {
    //改成你要代理的直播ID和店铺ID
    const ALIVE_ID = 'l_670c7fb8e4b0694c94ea3f7b';
    const APP_ID = 'appjmazichv3009'
    fetchInfo(ALIVE_ID, APP_ID).then(({ aliveInfo, goodsList }) => {
      this.aliveInfo = aliveInfo;
      this.goodsList = goodsList;

      window.APPID = this.aliveInfo?.app_id || "appjmazichv3009";
      window.USERID = this.aliveInfo?.user_id || "u_670c7fd316b59_3ItOy3nzQD";
    });
  },
  methods: {
    handleOpen(val) {
      this.isLiveH5 = !!val;
      this.isShowPay = true;
      this.$refs.currentPay.buy(this.params);
    },
    toBuy(goodsItem) {
      this.isLiveH5 = true;
      this.isShowPay = true;

      this.$refs.currentPay.buy({
        goodsItem,
        categoryInfo: [],
        hasPreferentialPrice: false,
        isFromLiveGoodsList: true,
        toDetails: false,
        permission: false,
      });
    },
    failCallback(val) {
      console.log("支付失败 ==>", val);
    },
    payComplete(val) {
      console.log("支付成功 ==>", val);
    },
    toIframe(jumpUrl) {
      console.log("跳转到iframe ==>", jumpUrl);
    },
    // 监听到currentPay挂载完成，这个只是为了兼容第一次调用组件buy方法的处理
    onCurrentPayMounted() {
      console.log(123);
      // this.$store.commit("VerticalLiveModule/setCurrentPayRenderState", 2);
    },
  },
};
</script>
<style>
body {
  margin: 0;
}
</style>
<style lang="scss" scoped>
#app {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0.24rem;
  height: 100vh;
  overflow: auto;
  font-size: 0.32rem;
  .title {
    display: flex;
    justify-content: center;
    font-size: 0.48rem;
    font-weight: 600;
    margin-bottom: 0.24rem;
  }
  .btn {
    line-height: 0.6rem;
    height: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.02rem solid #666666;
    border-radius: 0.24rem;

    & + .btn {
      margin-top: 0.24rem;
    }
  }
}
</style>
